<script setup>
import {
  VideoCamera,
  User,
  Upload,
  Fold,
  Expand,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {ref,onMounted,watch} from 'vue'
import 'element-plus/dist/index.css'
const isFold = ref(false)
const currentPage = ref(1)
const tableData = ref([
  { id: 1, account: '15815221751', name: '魏灿斌', age: '21', email: '2412119095@qq.com' },
  { id: 2, account: '15987654321', name: '张晓梅', age: '23', email: 'zhangxiaomei@example.com' },
  { id: 3, account: '15823456789', name: '李婷', age: '22', email: 'litin@example.com' },
  { id: 4, account: '15987654322', name: '王浩', age: '25', email: 'wanghao@example.com' },
  { id: 5, account: '15898765432', name: '赵丽', age: '24', email: 'zhaoli@example.com' },
  { id: 6, account: '15912345678', name: '刘伟', age: '28', email: 'liuwei@example.com' },
  { id: 7, account: '15887654321', name: '陈晓', age: '26', email: 'chenxiao@example.com' },
  { id: 8, account: '15923456789', name: '周俊', age: '27', email: 'zhoujun@example.com' },
  { id: 9, account: '15834567890', name: '孙婷', age: '29', email: 'sunting@example.com' },
  { id: 10, account: '15945678901', name: '何力', age: '30', email: 'heli@example.com' },
  { id: 11, account: '15865432109', name: '杨帅', age: '22', email: 'yangshuai@example.com' },
  { id: 12, account: '15956789012', name: '高凯', age: '24', email: 'gaokai@example.com' },
  { id: 13, account: '15876543210', name: '宋怡', age: '25', email: 'songyi@example.com' },
  { id: 14, account: '15967890123', name: '徐磊', age: '23', email: 'xulei@example.com' },
  { id: 15, account: '15887654320', name: '朱娟', age: '27', email: 'zhujuan@example.com' },
  { id: 16, account: '15978901234', name: '董伟', age: '28', email: 'dongwei@example.com' },
  { id: 17, account: '15898765431', name: '魏丽', age: '24', email: 'weili@example.com' },
  { id: 18, account: '15989012345', name: '李宏', age: '26', email: 'lihong@example.com' },
  { id: 19, account: '15876543211', name: '蒋娜', age: '23', email: 'jiangna@example.com' },
  { id: 20, account: '15991234567', name: '刘杰', age: '30', email: 'liujie@example.com' },
])
const formRef = ref(null)
const addInfo = ref({
  account:'',
  name:'',
  age:'',
  email:''
})
// const successOptions = ref({
//     message: '新增成功',
//     type: 'success',
//     plain: true,
//   })
//校验规则
const accountValid = (rule, value, callback) => {
  const illegalCharacters = /[^a-zA-Z0-9]/
  if (illegalCharacters.test(value)) {
    callback(new Error('账号不能包含非法字符'))
  } else {
    const res = tableData.value.find(item => item.account === value);
    if(res) {
      callback(new Error('账号已经存在,请输入其他账号'))
    }
    callback()
  }
}
// 索引
const getIndex = (index) => {
  return index+(currentPage.value-1)*10+1
}
const ageValid = (rule, value, callback) => {
  if (isNaN(value)) {
    callback(new Error('年龄必须为数字'))
  } else if (value < 0 || value > 200) {
    callback(new Error('年龄必须在0到200之间'))
  } else {
    callback()
  }
}
const emailValid = (rule, value, callback) => {
  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  if (!emailPattern.test(value)) {
    callback(new Error('邮箱格式不正确'))
  } else {
    callback()
  }
}

const currentShowData = ref([])
const dialogVisible = ref(false)
const rules = ref({
  account:[
    {required:true,message:'请输入账号',trigger:'blur'},
    {validator:accountValid,trigger:'blur'}
  ],
  name:[
    {required:true,message:'请输入姓名',trigger:'blur'},
    {min:1,max:10,message:'姓名长度在1-10之间'}
  ],
  age:[
    {required:true,message:'请输入年龄',trigger:'blur'},
    {validator:ageValid,trigger:'blur'}
  ],
  email:[
    {required:true,message:'请输入邮箱',trigger:'blur'},
    {validator:emailValid,trigger:'blur'}
  ],
})


const resetForm = () => {
  formRef.value.resetFields()
}


//提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if(valid) {
      const obj = {...addInfo.value}
      tableData.value.push(obj)
      updateShowData()
      dialogVisible.value = false
      ElMessage({
        message:'新增成功',
        type:'success',
        plain:true
      })
    }
  })
}
const updateShowData = () => {
  currentShowData.value = tableData.value.slice((currentPage.value - 1) * 10, currentPage.value * 10)
}

// 上一页
const handlePrevPage = () => {
  if(currentPage.value === 1 ) {
    return
  }
  currentPage.value--;
}

const handleNextPage = () => {
  if(currentPage.value === Math.ceil(tableData.value.length / 10)) {
    return
  }
  currentPage.value++;
}



onMounted(() => {
  updateShowData()
})

watch(currentPage, () => {
  updateShowData()
})
</script>

<template>
  <div class="app">
    <el-dialog v-model="dialogVisible" title="新增账号" width="500">
      <el-form :model="addInfo" :rules="rules" ref="formRef">
        <el-form-item label="账号" prop="account">
          <el-input v-model="addInfo.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addInfo.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addInfo.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addInfo.email" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="resetForm()" color="#1677ff">重置</el-button>
          <el-button type="primary" @click="submitForm()" color="#1677ff">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <div class="container">
      <div class="left">
        <el-menu
          stripe
          class="el-menu-vertical-demo"
          :collapse="isFold"
          default-active="1"
          >
          <el-menu-item index="1">
            <el-icon><User /></el-icon>
            <span>账号管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><VideoCamera /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><Upload /></el-icon>
            <span>权限管理</span>
          </el-menu-item>
      </el-menu>
      </div>
      <div class="right">
        <div class="top">
          <div class="menu_btn">
            <el-icon :size="20" v-if="!isFold" @click="isFold = !isFold"><Fold /></el-icon>
            <el-icon :size="20" v-else  @click="isFold = !isFold"><Expand /></el-icon>
          </div>
        </div>
        <div class="account_list">
          <h3>账号列表</h3>
          <div class="add_btn">
            <el-button type="primary" color="#1677ff" @click="dialogVisible = true">新增账号</el-button>
          </div>
          <el-table :data="currentShowData" >
              <el-table-column prop="id" label="序号"  type="index" :index="getIndex"/>
              <el-table-column prop="account" label="账号"  />
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="age" label="年龄" />
              <el-table-column prop="email" label="邮箱" />
            </el-table>
            <div class="page_btn">
              <div class="left_arrow" @click="handlePrevPage()">
                <el-icon :size="16" color="#cacaca"><ArrowLeft /></el-icon>
              </div>
              <div class="page_count">{{ currentPage }}</div>
              <div class="right_arrow" @click="handleNextPage()">
                <el-icon :size="16" color="#cacaca"><ArrowRight /></el-icon>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
.left {
  background-color: #001529;
}
.right {
  background-color: #f5f5f5;
}
.el-menu {
  background-color: #001529;

  border: none;
}
.el-menu-item  {
  border: none;
  background-color: #001529;
  margin: 5px !important;
  border-radius: 10px;
  color: white;
  span {
    width: 150px;
  }
}
.el_menu_item_active {
  background-color: #1677ff;
}

.right {
  width: 80%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    background-color: #ffffff;
  }
  .account_list {
    flex:10
  }
}

.menu_btn {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 40px;
  .el-icon {
    cursor: pointer;
  }
}

.account_list {
  padding: 40px;
  h3 {
    font-size: 30px;
    margin: 0;
    padding: 0;
  }
}
.add_btn {
  margin-top: 20px;
  margin-bottom: 20px;
}
::v-deep {
  .el-table th.el-table__cell {
    background-color:#fafafa;
    padding: 12px 0;
    color: black;
  }
  .el-menu-item.is-active {
    background-color: #1677ff;
  }
  .el-dialog__footer{
    text-align: left;
  }
  .el-form-item {
    display: block;
  }
}



.page_btn {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  align-items: center;
  .left_arrow,.right_arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .page_count {
    margin: 0 20px;
    width: 30px;
    height: 30px;
    border: 1px solid #3a8bfe;
    border-radius: 8px;
    text-align: center;
    line-height: 30px;
    color: #3a8bfe;
  }
}
</style>
